<template>
    <div class="app">
        <!-- 这里是nav -->
        <my-nav></my-nav>
        <!-- 这里是头部 -->
        <my-head></my-head>

        <div class="content">
            <div class="stats shadow" style="margin-left:250px;margin-top:95px;">

                <div class="stat">
                    <div class="stat-figure text-primary">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                            class="inline-block w-8 h-8 stroke-current">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
                            </path>
                        </svg>
                    </div>
                    <div class="stat-title">今日浏览</div>
                    <div class="stat-value text-primary">{{ todayInfo.totalBrowses }}</div>
                    <div class="stat-desc"></div>
                </div>

                <div class="stat">
                    <div class="stat-figure text-secondary">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                            class="inline-block w-8 h-8 stroke-current">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                        </svg>
                    </div>
                    <div class="stat-title">今日订单</div>
                    <div class="stat-value text-secondary">{{ todayInfo.totalOrders }}</div>
                    <div class="stat-desc"></div>
                </div>

                <div class="stat">
                    <div class="stat-figure text-secondary">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                            class="inline-block w-8 h-8 stroke-current">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <div class="stat-title">新增商品</div>
                    <div class="stat-value text-accent">{{ todayInfo.addNewGoods }}</div>
                    <div class="stat-desc"></div>
                </div>

            </div>

            <br>
            <a>
                <div class="tooltip tooltip-open tooltip-right" data-tip="今日" style="margin-top:20px;margin-left:80px">
                    <a class="btn btn-ghost normal-case text-xl">销量排行</a>
                </div>
                <div class="overflow-y-auto w-full"
                    style="position: absolute;margin-top:10px;width:70%;margin-left:80px;height:400px">
                    <table class="table w-full">
                        <!-- head -->
                        <thead>
                            <tr>
                                <th>
                                    排名
                                </th>
                                <th>商品</th>
                                <th>商家</th>
                                <th>销量</th>
                                <th>销售总额</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item, index) in salesData" :key="index">
                                <th>{{ index + 1 }}</th>
                                <td>
                                    <div class="flex items-center space-x-3">
                                        <div class="avatar">
                                            <div class="mask mask-squircle w-12 h-12">
                                                <img :src="item.pic" alt="商品图片" />
                                            </div>
                                        </div>
                                        <div>
                                            <div class="font-bold">{{ item.name }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td>{{ item.supplier }}</td>
                                <td>{{ item.sales }}</td>
                                <td>{{ item.total }}</td>
                            </tr>
                        </tbody>
                        <!-- foot -->
                        <tfoot>
                            <tr>
                                <th></th>
                                <th>商品名称</th>
                                <th>商家</th>
                                <th>销量</th>
                                <th>销售总额</th>
                            </tr>
                        </tfoot>

                    </table>
                </div>
            </a>

        </div>
    </div>
</template>

<script>
import MyHead from "../components/head.vue"
import MyNav from "../components/nav.vue"

export default {
    name: "index",
    data() {
        return {
            todayInfo: {}, //今日数据
            salesData: [], //今日销售数据
        }
    },
    mounted() {
        this.getTodayInfo()
        this.GetTodayGoodsRank()
    },
    methods: {
        //获取今日总信息
        getTodayInfo() {
            this.$http.post("/admin/getTodayInfo", {}, {
                headers: {
                    Authorization: "Bearer " + localStorage.getItem("admin_token") //带着token去请求
                },
            }).then((res) => {
                console.log(res)
                if (res.data.code == 401) { //代码登陆已经过期了
                    this.$router.push("/")
                    return
                }
                this.todayInfo = res.data.data
            }).catch((res) => {
                console.log(res);
            })
        },
        //获取今日排行前十的商品
        GetTodayGoodsRank() {
            this.$http.post("/admin/getTodayGoodsRank", {}, {
                headers: {
                    Authorization: "Bearer " + localStorage.getItem("admin_token") //带着token去请求
                },
            }).then((res) => {
                this.salesData = res.data.data
                if (res.data.code == 401) { //代码登陆已经过期了
                    this.$router.push("/")
                    return
                }
                console.log(res);
            }).catch((rep) => {
                console.log(rep);
            })
        }
    },
    components: {
        'my-head': MyHead,
        'my-nav': MyNav,
    },
}
</script>

<style scoped>
* {
    -webkit-user-select: none;
    /*webkit浏览器*/
    -khtml-user-select: none;
    /*早期浏览器*/
    -moz-user-select: none;
    /*火狐*/
    -ms-user-select: none;
    /*IE10*/
    user-select: none;
}

.content {
    width: 84%;
    height: 100vh;
    margin-left: 16%;
    overflow: auto;
}
</style>
